<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <link rel="shortcut icon" href="img/ic.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
<link rel="shortcut icon" href="img/ic.png">
    <title>违规信息</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">
<link href="dist/css/bootstrapValidator.css" rel="stylesheet">
    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/cdn/dataTables.bootstrap.css">
	<link rel="stylesheet" href="css/cdn/font_i0327076nave7b9.css">
    <link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
	<script src="js/cdn/moment-with-locales.min.js"></script>
	<link rel="stylesheet" href="css/cdn/bootstrap-datetimepicker.min.css">
    <style>
		#example_paginate{
			float:right;
		}
		.handle-btn{
			cursor: pointer;
		    margin: 0 2px;
		}
		#wrapper {
		    padding-left:0px;
		}
		.navigation{
			border-bottom: 3px solid #edebeb;
		}
		.navigation a:hover{
			color: #0F6AFC;
			border-bottom: 2px solid #01AAED;
		}
		.this{
			color: #01aaed;
			font-weight:bold;
			border-bottom: 2px solid #01AAED;
		}
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"style="height: 67px; background-image:url(img/top.jpg);">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style=" width:225px;">
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                 <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span id="userName"></span> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->

            <!-- /.navbar-collapse -->
        </nav>

        <div id="page-wrapper">
            <div class="container-fluid">
				<div class="row sss">
					<nav class="navbar navbar-default" role="navigation">
						<div>
							<ul class="nav navbar-nav">
								<li><a href="index.html">首页</a></li>
								<li class="active"><a href="javascript:;"><span class="xuanzhong">违规记录</span></a></li>
							</ul>
						</div>
					</nav>
				</div>
                <!-- /.row -->
                 <div class="row">
                 	<div class="panel-heading">
						<div class="col-sm-2 widtha">
							<div class="form-group">  
					            <label class="col-sm-6 gao">选择车队名称</label>  
					            <!--指定 date标记-->  
					            <div class="col-sm-6 gao">  
					                <select class="form-controls" v-model="selected" id="teamId" v-cloak>
										<option  v-for="option in DetailsObj"  :id="option.teamId" v-bind:value="option.teamName" >
											{{option.teamName}}
										</option>
									</select>
					            </div>  
					       </div>  
						</div>
						<div class='col-sm-2 widths'>  
					        <div class="form-group">  
					            <label class="col-sm-6 gao">选择开始时间</label>  
					            <!--指定 date标记-->  
					            <div class='col-sm-6 gao input-group right' id='datetimepicker1'>  
					                <input type='text' id="startTime"  class="form-controls" />  
					                <span class="input-group-addon">  
					                    <span class="glyphicon glyphicon-calendar"></span>  
					                </span>  
					            </div>  
					        </div>  
					    </div>  
					    <div class='col-sm-2 widths'>  
					        <div class="form-group">  
					            <label class="col-sm-6 gao">选择结束时间</label>  
					            <!--指定 date标记-->  
					            <div class='col-sm-6 input-group right gao' id='datetimepicker2'>  
					                <input type='text' class="form-controls" id="endTime" />  
					                <span class="input-group-addon">  
					                    <span class="glyphicon glyphicon-calendar"></span>  
					                </span>  
					            </div>  
					        </div>  
					    </div>  
						<div class="col-sm-1">
							<button class="btn btn-primary" type="button" v-on:click="Submit()" >
					    		查询
							</button>
						</div>
					</div>
                    <div class="panel-body">
                        <table id="example" class="display" width="100%"></table>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
    
    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
	<!-- tab table-->
	<script src="js/cdn/jquery.dataTables.min.js"></script>
	<script src="js/cdn/dataTables.bootstrap.js"></script>
	<!-- device-->
	<script src="nuget/content/scripts/toastr.js"></script>
	<script type="text/javascript" src="dist/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<script type="text/javascript" src="js/vue/vue.js" ></script>
	<script type="text/javascript" src="js/vue/vue-router.js" ></script>
	<script src="js/cdn/bootstrap-datetimepicker.min.js"></script>
	<script>
		$(function () {
            var userName = localStorage.getItem("userName");    $("#userName").text(userName);
		    var picker1 = $('#datetimepicker1').datetimepicker({  
		        format: 'YYYY-MM-DD HH:mm:00', 
		        locale: moment.locale('zh-cn'),  
		        //minDate: '2016-7-1'  
		    });  
		    var picker2 = $('#datetimepicker2').datetimepicker({  
		        format: 'YYYY-MM-DD HH:mm:00',  
		        locale: moment.locale('zh-cn')  
		    });  
		    //动态设置最小值  
		    picker1.on('dp.change', function (e) {  
		        picker2.data('DateTimePicker').minDate(e.date);  
		    });  
		    //动态设置最大值  
		    picker2.on('dp.change', function (e) {  
		        picker1.data('DateTimePicker').maxDate(e.date);  
		    });  
		});  
		Vue.filter("timeChange", function(value) {
			return replaceTime(value / 1000);
		});
		var vue = new Vue({
		  el: '#wrapper',
		  data:{
		  	selected:[],
        	DetailsObj:{},
		  },
		  mounted:function(){
		  	this.deviceBasicId();
		  	this.scenesResults();
		  },
		  methods:{
		  	scenesResults:function(){
		  		var _self = this;
                $.ajax({
                    type: "get",
                    url: url + '/users/' + adminId + "/teams",
                    async: false,
                    data:{
						"currentPage":1,
		                "pageSize":9999,
					},  
                    async: false,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    beforeSend: function (request) {
                        request.setRequestHeader("accessToken", accessToken);
                    },
                    success: function (data) {
                    	if(data.code == 1){
                    		_self.DetailsObj = {};
							var result = data.result;
							_self.DetailsObj = result;
                    	}
                    }
        		});
		  	},
		  	//初始化显示详情
		  	deviceBasicId:function(){
		  		var _self = this;
				var myTable = $('#example').DataTable({
				    "processing": false, //DataTables载入数据时，是否显示‘进度’提示
		            "stateSave": true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
		            "scrollCollapse": true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
		            "paginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
		            "language": lang, //提示信息
		            "autoWidth": true, //自适应宽度，
		            "lengthMenu": [15, 30, 50],
		            "stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
		            "showRowNumber":true,
		            "searching": false, //是否允许Datatables开启本地搜索
		            "paging": true, //是否开启本地分页
		            "lengthChange": false, //是否允许产品改变表格每页显示的记录数
		            "info": false, //控制是否显示表格左下角的信息
		            //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
		            "ordering": false,
		            "deferRender": true, //延迟渲染
		            //"ajax":"json/device.json",
				    "ajax": {
				      	url : url +'/illegalResults',
						type : 'get',
						data:{
		                    "currentPage":1,
		                    "pageSize":9999,
		                },
						dataType : 'json',
						beforeSend: function(request) {
				            request.setRequestHeader("accessToken", accessToken);
				        },
						success : function(data) {
							if(data['code'] == 1){
		                        if(data.result.length != 0)
		                            $('#example').dataTable().fnAddData(data.result);
		                        else
		                            $('#example').dataTable().fnClearTable();
		                    }else{
								ifajax(data);
							}
						}
				      }, 

			      "columns": [{
		                "data": function (obj) {
		                	var  time =  replaceDate(obj.createTime /1000);
		                    return '<a href="Exhibition.html?teamId=' + obj.teamId + '&date='+time+'" target="_blank" style="color:#1aa79d; text-decoration:none;"><b>' + obj.teamName + '</b></a>';
					},
		                "sTitle": "车队", //标题
		                "sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
		            }, {
		                "data": function(obj){
		                	if(obj.scenesType != 1){
		                		if(obj.scenesNo != null){
			                		return '[场景'+obj.scenesNo+']'+obj.illegalName;
			                	}else{
			                		return '[场景]'+obj.illegalName;
			                	}
		                	}else{
		                		return '[路段]'+obj.illegalName;
		                	}
			                	
		                },
		                "sTitle": "违规原因",
		                "sDefaultContent": "",
		            }, {
		                "data": function (obj) {
		                    return replaceTime(obj.createTime / 1000);
		                },
		                "sTitle": "违规时间", //标题
		                "sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
		            }],
			    });
		  	},
		  	Submit:function(){
		  		var endTime = $("#endTime").val();
            	var startTime = $("#startTime").val();
            	var teamId = $("#teamId option:selected").attr("id");
		  		var datas = {
		  			"endTime":endTime,
		  			"startTime":startTime,
		  			"teamId":teamId,
		  			"count":999
		  		};
		  		var th = this;
		  		$.ajax({
		  			type: "GET",
		  			url:url+'/illegalResults',
		  			data:datas,
					async:false,
		  			dataType: 'json',
					contentType: "application/json; charset=utf-8",
		  			beforeSend: function(request) {
						request.setRequestHeader("accessToken", accessToken);
					},
					success: function(data) {
						if(data['code'] == 1){
		                        if(data.result.length != 0){
		                        	$('#example').dataTable().fnClearTable();
		                        	$('#example').dataTable().fnAddData(data.result);
		                        }else{
		                        	$('#example').dataTable().fnClearTable();
		                        }  
	                    }else{
							toastr['error'](data.description);
						}
						
					}
		  		});
		  	},
		  },
		});

	</script>
</body>

</html>
